import 'package:card_swiper/card_swiper.dart';
import 'package:flutter/material.dart';
import 'package:flutter_ohos/app/common/fold_status_provider.dart';
import 'package:get/get.dart';
import 'package:provider/provider.dart';

import '../../routes/app_routes.dart';
import 'time_flow_provider.dart';

class TimeFlowPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (BuildContext context) => TimeFlowProvider(),
      builder: (context, child) => _buildPage(context),
    );
  }

  Widget _buildPage(BuildContext context) {
    final provider = context.read<TimeFlowProvider>();
    final state = provider.state;

    final statusProvider = context.read<FoldStatusProvider>();

    return ListView(
      children: [
        Container(
          height: 200,
          // margin: EdgeInsets.only(top: 30),
          child: Consumer<FoldStatusProvider>(builder: (context,sProvider,child){
              double fraction = sProvider.foldStatus == FoldStatus.expanded? 0.5 : 1.0;
              return Swiper(
                layout: SwiperLayout.DEFAULT,
                itemBuilder: (BuildContext context,int index){
                  return Container(
                    margin: sProvider.foldStatus == FoldStatus.expanded? EdgeInsets.symmetric(horizontal: 10) : EdgeInsets.zero,
                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(8),color: Colors.white),
                    child: Image.asset("assets/images/bg${index+1}.jpeg",fit: BoxFit.cover),
                    clipBehavior: Clip.hardEdge,
                  );
                },
                itemCount: 6,
                pagination: const SwiperPagination(),
                viewportFraction: fraction,
                // scale: 0.9,
                // outer: true,
                // itemHeight: 200,
                // itemWidth: 300,
                // control: SwiperControl(),
              );

          },),
        ),
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 10,vertical: 20),
          child: const Text('业务模块',style: TextStyle(fontSize: 16,fontWeight: FontWeight.w500),),
        ),
        Container(
          margin: const EdgeInsets.symmetric(horizontal: 10),
          child: GridView.builder(
            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
              //设置列数
              // crossAxisCount: 4,
              maxCrossAxisExtent: 73,
              childAspectRatio: 90 / 73,
              // //设置横向间距
              // crossAxisSpacing: 0,
              //设置主轴间距
              mainAxisSpacing: 0,
            ),
            physics: const NeverScrollableScrollPhysics(),
            shrinkWrap: true,
            scrollDirection: Axis.vertical,
            itemCount: state.gridItems.length,
            itemBuilder: (context, index) {
              return Container(
                  alignment: Alignment.center,
                  child: _buildFunctionItem(context, index));
            },
          ),
        )
      ],
    );
  }

  Widget _buildFunctionItem(BuildContext context, int index) {
    final provider = context.read<TimeFlowProvider>();
    final state = provider.state;

    return Container(
      child: GestureDetector(
        onTap: (){
          if(index == 0) {
            Get.toNamed(Routes.EIGHTVIEW);
          }
        },
        child: Column(
          children: [
            Image.asset("assets/images/icon_home_unselected.png"),
            Text(state.gridItems[index]["title"]??""),
          ],
        ),
      ),
    );
  }

}